<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #tb {
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
        }

        #tb th {
            background-color: #0094ff;
            color: white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }

        #tb td {
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }

        #app {
            text-align: center;
        }
    </style>
</head>
<script src="../vue1026.js"></script>

<body>
    <div id="app">
        <input type="text" v-model="id">
        <input type="text" v-model="pname" @keydown.f2="addData">
        <button @click="addData">添加数据</button></br>
        <my-red>搜索条件</my-red><input type="text" v-focus v-color='color' placeholder="请输入筛选内容" v-model="sname">
        <table id="tb">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            <tr v-if=" list.length == 0 ">
                <td colspan="4">当前列表没有数据</td>
            </tr>
            <tr v-for="item in list | filterBy sname in 'name'">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime | dataTmp}}</td>
                <td>
                    <a href="javascript:void(0);" @click="deldata(item.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>

    <script>
        Vue.elementDirective('my-red', {
            bind: function () {
                this.el.style.color = 'red'
            }
        })
        // Vue.directive('color', function () {
        //     console.log(this.expression)
        //     this.el.style.color = this.vm[this.expression];
        // })
        Vue.directive('color', {
            function() {
                console.log(this.expression)
                this.el.style.color = this.vm[this.expression];
            }
        })
        Vue.directive('focus', function () {
            var inputObj = this.el;
            inputObj.focus();
        })
        Vue.directive('on').keyCodes.f2 = 113;
        Vue.filter('dataTmp', function (input, formitstring) {
            var res = '';
            var year = input.getFullYear();
            var month = input.getMonth() + 1;
            var day = input.getDate();
            if (formitstring == 'yyyy-mm-dd') {
                res = year + '-' + month + '-' + day;
            } else {
                res = year + '-' + month + '-' + day + ' 05:10:39';
            }
            return res;
        })
        var vm = new Vue({
            el: '#app',
            data: {
                color: "red",
                list: [
                    { id: 1, name: '宝马', ctime: new Date() },
                    { id: 2, name: '奔驰', ctime: new Date() },
                    { id: 3, name: '大奔奔', ctime: new Date() },
                    { id: 4, name: '奥迪', ctime: new Date() },
                    { id: 5, name: '宝宝', ctime: new Date() },
                ],
                id: 0,
                pname: '',
                sname: ''
            },
            methods: {
                addData: function () {
                    var p = { id: this.id, name: this.pname, ctime: new Date() };
                    this.list.push(p);
                    this.id = 0;
                    this.pname = "";
                },
                deldata: function (id) {
                    if (!confirm('您确定要删除列表吗？')) {
                        return;
                    };
                    var index = this.list.findIndex(function (id) {
                        return this.id = id;
                    });
                    this.list.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html>